<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KitShare</title>
    <script src="http://119.3.180.71/api/Visual.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/header.css" />
    <link rel="stylesheet" type="text/css" href="./css/content.css" />
    <link rel="stylesheet" type="text/css" href="./css/showpic.css" />
    <link rel="stylesheet" type="text/css" href="./css/contentLeftDiv.css" />
    <link rel="stylesheet" type="text/css" href="./css/contentRightDiv.css" />
    <link rel="stylesheet" type="text/css" href="./css/rightDivBlockSize.css" />
    <script src="./js/data_list.js"></script>
    
    <style>
        /* 全局样式 */
        a{
            color:#0366d6;
            text-decoration:none;
        }
        *{
            padding: 0px;
            margin: 0px;
        }
        body{
            background-color: #f6f8fa;
        }
        /* 手机端 */

        /* 平板端 */

        /* 电脑端 */
    </style>

</head>
<body>
    <!-- header -->
    <div class="header">
        <img src="http://119.3.180.71/img/logo.png" class="header-logo">
        <div class="header-choose"><a href="#" style="color: #363333;">主页</a></div>
        <div class="header-choose"><a href="http://119.3.180.71/api/ts723_Designs.txt"style="color: #363333;" target="blank">正交表</a></div>
        <div class="header-choose"><a href="#"style="color: #363333;">关于我们</a></div>
        <svg preserveAspectRatio="xMidYMid meet" id="header_svg" class="header-svg" height="2.0em" width="2.0em" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" class="icon-7f6730be--text-3f89f380--icon-1f8349b3"><g><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></g></svg>
    </div>
    <div class="header-bgur header-bgur-none" id="header_bgur">
        <div class="header-bgur-textdiv"><a href="#" style="color: #363333;">主页</a></div>
        <div class="header-bgur-textdiv"><a href="http://119.3.180.71/api/ts723_Designs.txt"style="color: #363333;" target="blank">正交表</a></div>
        <div class="header-bgur-textdiv"><a href="#"style="color: #363333;">关于我们</a></div>
    </div>
    <div style="width:100%;height:3em;"></div>
    <!-- header -->

    <!-- content -->
    <div class="content" id="content">
        <div class="content-left-div">
            <div style="width:100%;height:3em;margin-top: 3em;display: flex;justify-content: space-around;align-items: center;">
                <div id="light_1" style="width:1em;height:1em;background-color:  rgb(255, 255, 255);border-radius: 0.5em;"></div>
                <div style="font-size: 1.1em;color:rgb(255, 255, 255);font-weight: 600;width:70%;display: flex;justify-content: center;">输入水平数与因素数</div>
            </div>
            <div style="width:100%;height:3em;margin-top: 0.4em;display: flex;justify-content: space-around;align-items: center;">
                <div id="light_2" style="width:1em;height:1em;background-color: rgb(255, 255, 255);border-radius: 0.5em;"></div>
                <div style="font-size: 1.1em;color:rgb(255, 255, 255);font-weight: 600;width:70%;display: flex;justify-content: center;">正交表查询结果</div>
            </div>
            <div style="width:100%;height:3em;margin-top: 0.4em;display: flex;justify-content: space-around;align-items: center;">
                <div id="light_3" style="width:1em;height:1em;background-color: rgb(255, 255, 255);border-radius: 0.5em;"></div>
                <div style="font-size: 1.1em;color:rgb(255, 255, 255);font-weight: 600;width:70%;display: flex;justify-content: center;">输入因素的可选种类</div>
            </div>
            <div style="width:100%;height:3em;margin-top: 0.4em;display: flex;justify-content: space-around;align-items: center;">
                <div  id="light_4" style="width:1em;height:1em;background-color: rgb(255, 255, 255);border-radius: 0.5em;"></div>
                <div style="font-size: 1.1em;color:rgb(255, 255, 255);font-weight: 600;width:70%;display: flex;justify-content: center;">测试样例</div>
            </div>
        </div>

        
        <div class="content-right-div" style="display: flex;justify-content: center;">
            <!-- 输入水平数与因素数 -->
            <div class="contentRightDivSize" style="height:20em;background-color: #f6faf8;margin-top: 3em;border-radius: 0.5em;">
                <!-- 顶部文字 -->
                <div style="width:100%;height:2em;margin-top: 5em;display:flex;justify-content: center;align-items: center;font-size: 1em;font-weight: 700;">
                    水平数和因素数
                </div>
                <!-- 表单 -->
                <input type="text" value="3^12 12^1" id="level_number" style="height: 2em;width: 70%;outline:none;margin-left: 15%;font-size: 1em;text-align: center;margin-top: 0.5em;border-radius: 0.5em;">
                <button id="enter_1" style="width:25%;height:2.5em;outline:none;margin-left: 55%;margin-top: 2em;border-radius: 1.25em;background-color: rgb(233, 115, 118);">
                    确定
                </button>
                <div style="height:5em;width:100%;display: flex;justify-content: center;margin-top: 2em;">例(1): 2^4 4^1 例(2): 2^2 6^1 (复合输入中间以一个空格字符隔开)</div>
            </div>
            <script type="text/javascript" src="./js/enter_1.js"></script>

            <!-- 正交表查询结果 -->
            <div class="contentRightDivSize" style="min-height:24em;background-color: #f6faf8;margin-top: 2em;border-radius: 0.5em;">
                <div style="width:100%;height:2em;margin-top: 1em;display:flex;justify-content: center;align-items: center;font-size: 1em;font-weight: 700;">
                    正交表查询结果
                </div>
                <!-- 正交表内容 -->
                <textarea id="textarea_content" readonly="readonly" style="min-width: 90%;max-width:90%;width:90%;margin-left: 5%;height:17em;background-color: #ffffff;color:#5a5858;border-radius: 0.5em;font-size: 1.2em;"></textarea>
            </div>


            <!-- 输入因素的可选种类 -->
            <div class="contentRightDivSize" style="min-height:24em;background-color: #f6faf8;margin-top: 2em;border-radius: 0.5em;">
                <!-- 顶部文字 -->
                <div style="width:100%;height:2em;margin-top: 1em;display:flex;justify-content: center;align-items: center;font-size: 1em;font-weight: 700;">
                    因素的可选种类
                </div>
                <textarea id="input_type" style="min-width: 90%;max-width:90%;width:90%;margin-left: 5%;height:17em;background-color: #ffffff;color:#5a5858;border-radius: 0.5em;font-size: 1.2em;"></textarea>
                <button id="enter_2" style="width:25%;height:2.5em;outline:none;margin-left: 55%;margin-top: 2em;border-radius: 1.25em;background-color: rgb(233, 115, 118);margin-bottom: 2em;">
                    确定
                </button>
            </div>
            <!-- 第二个按钮事件 -->
            <script type="text/javascript" src="./js/enter_2.js"></script>
            


            <!-- 测试样例 -->
            <div class="contentRightDivSize" style="min-height:24em;background-color: #f6faf8;margin-top:2em;margin-bottom:10em;border-radius: 0.5em;">
                <div style="width:100%;height:2em;margin-top: 1em;display:flex;justify-content: center;align-items: center;font-size: 1em;font-weight: 700;">
                    测试样例
                </div>
                <!-- 正交表内容 -->
                <textarea id="result_textarea" style="min-width: 90%;max-width:90%;width:90%;margin-left: 5%;height:17em;background-color: #ffffff;color:#5a5858;border-radius: 0.5em;font-size: 1.2em;"></textarea>
            </div>

            

            <!-- 网页尾部 -->
            <div class="footer" style="color:#586069;display: flex;flex-wrap: wrap;width:100%;">
                <div style="width:98%;margin-left: 4%;">This is a software test job!Design by GaoWanlu</div>
                <div style="width: 20%;margin-left: 4%;height: 10em;display: flex;align-items: center;justify-content: center;">
                    © 2020 KitShare, Inc.
                </div>
                <div style="width: 75%;display: flex;justify-content: space-around;align-items: center;flex-wrap: wrap;">
                    <div style="width:6em;height:1em;display: flex;justify-content: center;align-items: center;">
                        <a href="#" style="font-size: 0.8em;">Blog</a>
                    </div>
                    <div style="width:6em;height:1em;display: flex;justify-content: center;align-items: center;">
                        <a href="#" style="font-size: 0.8em;">API</a>
                    </div>
                    <div style="width:6em;height:1em;display: flex;justify-content: center;align-items: center;">
                        <a href="#" style="font-size: 0.8em;">Terms</a>
                    </div>
                    <div style="width:6em;height:1em;display: flex;justify-content: center;align-items: center;">
                        <a href="#" style="font-size: 0.8em;">About</a>
                    </div>
                    <div style="width:6em;height:1em;display: flex;justify-content: center;align-items: center;">
                        <a href="#" style="font-size: 0.8em;">About</a>
                    </div>
                    <div style="width:6em;height:1em;display: flex;justify-content: center;align-items: center;">
                        <a href="#" style="font-size: 0.8em;">Help</a>
                    </div>
                </div>
            </div>




        </div>
    </div>
    <!-- content -->
</body>
<script type="text/javascript" src="./js/header.js"></script>
</html>